<template>
  <div class="inputSelect">
    <el-form size="mini" :model="formData" ref="formData">
      <div class="flex">
        <div class="mr-5 fontMini">当"上级字段"为</div>
        <el-form-item prop="parentValue" :rules="rules.parentValue" class="flex1">
          <el-select v-model="formData.parentValue" class="flex1" multiple @change="valueChange">
            <el-option v-for="item in parentDataOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <div class="ml-5 fontMini">时，</div>
      </div>

      <div class="flex">
        <div class="mr-5 fontMini">"当前选项"</div>
        <el-form-item prop="currentShow" :rules="rules.currentShow" class="flex1">
          <el-select class="flex1" v-model="formData.currentShow" @change="valueChange">
            <el-option v-for="item in currentShowList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <!-- 当前选项input配置项 -->
      <el-form-item v-if="formData.currentShow === 'showAnd'" prop="param">
        <ConditionsType v-model="formData.param" :titleList="titleList" ref="conditionsType" @change="valueChange"></ConditionsType>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const currentShowList = [
  { label: '显示', value: 'show' },
  { label: '隐藏', value: 'hidden' },
  { label: '显示且', value: 'showAnd' }
]
import ConditionsType from './conditionsType'
export default {
  name: 'inputSelect',
  components: {
    ConditionsType
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: Object,
    parentData: Object
  },
  computed: {
    parentDataOption() {
      return this.parentData?.options
    }
  },
  watch: {
    value: {
      handler(val) {
        this.formData = JSON.stringify(val) === '{}' ? this.formDataInit() : val
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      currentShowList,
      formData: {},
      titleList: ['且采用', '则需要满足', '条件'],
      rules: {
        parentValue: [{ required: true, message: '上级字段不能为空', trigger: 'change' }],
        currentShow: [{ required: true, message: '当前选项不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    formDataInit() {
      return {
        parentValue: [],
        param: {},
        currentShow: 'show'
      }
    },

    valueChange() {
      this.$emit('change', this.formData)
    },

    // 校验子组件是否成功和当前form是否成功
    verfiyForm() {
      return new Promise(async resovle => {
        if (this.formData.currentShow === 'showAnd') {
          // ConditionsType组件存在时，需要校验ConditionsType
          const res = await this.$refs.conditionsType.verfiyForm()
          this.$refs.formData.validate(valid => {
            if (valid && res === 'success') {
              resovle('success')
            } else {
              resovle('error')
            }
          })
        } else {
          this.$refs.formData.validate(valid => {
            if (valid) {
              resovle('success')
            } else {
              resovle('error')
            }
          })
        }
      })
    }
  }
}
</script>